<template>
  <div class="app-header">
    <nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <nuxt-link class="navbar-brand" to="./index.html">
          <i class="fas fa-anchor mr-2"></i>
          <strong>优咪乐古诗词</strong>
        </nuxt-link>
        <button class="navbar-toggler collapsed show" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse show">
          <ul class="navbar-nav mr-auto d-flex align-items-center">
            <li class="nav-item">
              <nuxt-link class="nav-link" to="/">首页</nuxt-link>
            </li>
            <li class="nav-item dropdown show">
              <a class="nav-link dropdown-toggle"> 分类 </a>
              <div class="dropdown-menu show">
                <nuxt-link class="dropdown-item" to="./landing.html">分类1</nuxt-link>
                <nuxt-link class="dropdown-item" to="./login.html">分类2</nuxt-link>
              </div>
            </li>
            <li class="nav-item">
              <nuxt-link class="nav-link" to="/test">关于我们</nuxt-link>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto d-flex align-items-center">
            <li class="nav-item">
              <span class="nav-link">
                <nuxt-link class="btn btn-info btn-round shadow-sm" to="https:www.baidu.com"> <i class="fas fa-cloud-download-alt"></i>下载优咪乐古诗词</nuxt-link>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>
<script setup lang="ts"></script>
